<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="反馈ID" prop="feedbackId">
        <el-input
          v-model="queryParams.feedbackId"
          placeholder="请输入反馈ID"
          clearable
          type="number"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="满意度" prop="satisfactionScore">
        <el-select
          v-model="queryParams.satisfactionScore"
          placeholder="请选择满意度"
          clearable
          style="width: 200px">
          <el-option label="1分 - 非常不满意" :value="1" />
          <el-option label="2分 - 不满意" :value="2" />
          <el-option label="3分 - 一般" :value="3" />
          <el-option label="4分 - 满意" :value="4" />
          <el-option label="5分 - 非常满意" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="红娘服务" prop="matchmakerScore">
        <el-select
          v-model="queryParams.matchmakerScore"
          placeholder="请选择红娘服务评分"
          clearable
          style="width: 200px">
          <el-option label="1分 - 非常不满意" :value="1" />
          <el-option label="2分 - 不满意" :value="2" />
          <el-option label="3分 - 一般" :value="3" />
          <el-option label="4分 - 满意" :value="4" />
          <el-option label="5分 - 非常满意" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt">
        <el-date-picker clearable
          v-model="queryParams.createdAt"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['feedback:feedback:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="feedbackList">
      <el-table-column label="反馈ID" align="center" prop="feedbackId" width="80" />
      <el-table-column label="约会安排ID" align="center" prop="arrangementId" width="100" />
      <el-table-column label="反馈用户ID" align="center" prop="userId" width="100" />
      <el-table-column label="满意度" align="center" prop="satisfactionScore" width="120">
        <template #default="scope">
          <el-rate
            v-model="scope.row.satisfactionScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}分"
            style="display: flex; align-items: center; justify-content: center;"
          />
        </template>
      </el-table-column>
      <el-table-column label="反馈内容" align="center" prop="feedbackContent" width="200" show-overflow-tooltip />
      <el-table-column label="红娘服务" align="center" prop="matchmakerScore" width="120">
        <template #default="scope">
          <el-rate
            v-model="scope.row.matchmakerScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}分"
            style="display: flex; align-items: center; justify-content: center;"
          />
        </template>
      </el-table-column>
      <el-table-column label="再次约会意愿" align="center" prop="isWillingNext" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.isWillingNext === 1" type="success">愿意</el-tag>
          <el-tag v-else-if="scope.row.isWillingNext === 0" type="danger">不愿意</el-tag>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350">
        <template #default="scope">
          <el-button
            link
            type="success"
            icon="Calendar"
            @click="handleViewArrangement(scope.row.arrangementId)"
            v-hasPermi="['feedback:feedback:query']">
            约会安排详情
          </el-button>
          <el-button
            link
            type="info"
            icon="User"
            @click="handleViewUser(scope.row.userId)"
            v-hasPermi="['feedback:feedback:query']">
            反馈用户详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />



    <!-- 用户详情对话框 -->
    <el-dialog title="用户详情信息" v-model="userDetailOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border v-if="userDetail">
        <el-descriptions-item label="用户ID">{{ userDetail.userId }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userDetail.phone || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ userDetail.nickname || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-tag v-if="userDetail.gender === 1" type="primary">男</el-tag>
          <el-tag v-else-if="userDetail.gender === 2" type="danger">女</el-tag>
          <span v-else>未知</span>
        </el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ parseTime(userDetail.birthDate, '{y}-{m}-{d}') || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="头像" :span="2">
          <el-image
            v-if="userDetail.avatarUrl"
            :src="userDetail.avatarUrl"
            style="width: 100px; height: 100px; border-radius: 50%;"
            fit="cover"
            :preview-src-list="[userDetail.avatarUrl]"
          />
          <span v-else>暂无头像</span>
        </el-descriptions-item>
        <el-descriptions-item label="粉丝数">{{ userDetail.fan || 0 }}</el-descriptions-item>
        <el-descriptions-item label="被关注数">{{ userDetail.countFollow || 0 }}</el-descriptions-item>
        <el-descriptions-item label="被赞总数">{{ userDetail.countLike || 0 }}</el-descriptions-item>
        <el-descriptions-item label="用户角色">
          <el-tag v-if="userDetail.userRole === 1" type="info">普通用户</el-tag>
          <el-tag v-else-if="userDetail.userRole === 2" type="success">红娘</el-tag>
          <span v-else>未知</span>
        </el-descriptions-item>
        <el-descriptions-item label="注册来源">
          <el-tag v-if="userDetail.registerSource === 1" type="info">手机注册</el-tag>
          <el-tag v-else-if="userDetail.registerSource === 2" type="success">微信注册</el-tag>
          <el-tag v-else-if="userDetail.registerSource === 3" type="warning">QQ注册</el-tag>
          <span v-else>其他</span>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ parseTime(userDetail.registerTime, '{y}-{m}-{d} {h}:{i}:{s}') || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="最后登录时间">{{ parseTime(userDetail.lastLoginTime, '{y}-{m}-{d} {h}:{i}:{s}') || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="第三方平台ID">{{ userDetail.openId || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="账号状态">
          <el-tag v-if="userDetail.accountStatus === 1" type="success">正常</el-tag>
          <el-tag v-else-if="userDetail.accountStatus === 0" type="danger">冻结</el-tag>
          <el-tag v-else-if="userDetail.accountStatus === 2" type="info">注销</el-tag>
          <span v-else>未知</span>
        </el-descriptions-item>
        <el-descriptions-item label="是否实名认证">
          <el-tag v-if="userDetail.isVerified === 1" type="success">已认证</el-tag>
          <el-tag v-else type="warning">未认证</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否VIP">
          <el-tag v-if="userDetail.isVip === 1" type="warning">VIP用户</el-tag>
          <span v-else>普通用户</span>
        </el-descriptions-item>
        <el-descriptions-item label="VIP过期时间" v-if="userDetail.isVip === 1">
          {{ parseTime(userDetail.vipExpireTime, '{y}-{m}-{d} {h}:{i}:{s}') || '暂无' }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="userDetailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 约会安排详情对话框 -->
    <el-dialog title="约会安排详情" v-model="arrangementDetailOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border v-if="arrangementDetail">
        <el-descriptions-item label="安排ID">{{ arrangementDetail.arrangementId }}</el-descriptions-item>
        <el-descriptions-item label="牵线申请ID">{{ arrangementDetail.requestId }}</el-descriptions-item>
        <el-descriptions-item label="红娘ID">{{ arrangementDetail.matchmakerId }}</el-descriptions-item>
        <el-descriptions-item label="用户A">{{ arrangementDetail.userId }}</el-descriptions-item>
        <el-descriptions-item label="用户B">{{ arrangementDetail.targetUserId }}</el-descriptions-item>
        <el-descriptions-item label="约会时间">{{ parseTime(arrangementDetail.dateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="约会地点">{{ arrangementDetail.dateLocation }}</el-descriptions-item>
        <el-descriptions-item label="约会类型">
          <el-tag v-if="arrangementDetail.dateType === 1" type="info">咖啡厅</el-tag>
          <el-tag v-else-if="arrangementDetail.dateType === 2" type="success">餐厅</el-tag>
          <el-tag v-else-if="arrangementDetail.dateType === 3" type="warning">电影院</el-tag>
          <el-tag v-else-if="arrangementDetail.dateType === 4" type="danger">其他</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="约会计划详情" :span="2">{{ arrangementDetail.datePlan || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="用户A确认状态">
          <el-tag v-if="arrangementDetail.userAConfirm === 0" type="warning">待确认</el-tag>
          <el-tag v-else-if="arrangementDetail.userAConfirm === 1" type="success">已确认</el-tag>
          <el-tag v-else-if="arrangementDetail.userAConfirm === 2" type="danger">已拒绝</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="用户B确认状态">
          <el-tag v-if="arrangementDetail.userBConfirm === 0" type="warning">待确认</el-tag>
          <el-tag v-else-if="arrangementDetail.userBConfirm === 1" type="success">已确认</el-tag>
          <el-tag v-else-if="arrangementDetail.userBConfirm === 2" type="danger">已拒绝</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安排状态">
          <el-tag v-if="arrangementDetail.arrangementStatus === 0" type="warning">待确认</el-tag>
          <el-tag v-else-if="arrangementDetail.arrangementStatus === 1" type="success">已确认</el-tag>
          <el-tag v-else-if="arrangementDetail.arrangementStatus === 2" type="info">已取消</el-tag>
          <el-tag v-else-if="arrangementDetail.arrangementStatus === 3" type="primary">已完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="取消原因" v-if="arrangementDetail.cancelReason" :span="2">{{ arrangementDetail.cancelReason }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(arrangementDetail.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="更新时间" v-if="arrangementDetail.updatedAt">{{ parseTime(arrangementDetail.updatedAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="arrangementDetailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Feedback">
import { listFeedback, getUserInfo, getArrangementInfo } from "@/api/feedback/feedback"

const { proxy } = getCurrentInstance()

// 约会反馈表格数据
const feedbackList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)

// 用户详情对话框
const userDetailOpen = ref(false)
const userDetail = ref(null)

// 约会安排详情对话框
const arrangementDetailOpen = ref(false)
const arrangementDetail = ref(null)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    feedbackId: null,
    satisfactionScore: null,
    matchmakerScore: null,
    createdAt: null
  }
})

const { queryParams } = toRefs(data)

/** 查询约会反馈列表 */
function getList() {
  loading.value = true
  listFeedback(queryParams.value).then(response => {
    feedbackList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

/** 查看用户详情 */
function handleViewUser(userId) {
  getUserInfo(userId).then(response => {
    userDetail.value = response.data
    userDetailOpen.value = true
  }).catch(() => {
    proxy.$modal.msgError("获取用户详情失败")
  })
}

/** 查看约会安排详情 */
function handleViewArrangement(arrangementId) {
  getArrangementInfo(arrangementId).then(response => {
    arrangementDetail.value = response.data
    arrangementDetailOpen.value = true
  }).catch(() => {
    proxy.$modal.msgError("获取约会安排详情失败")
  })
}



/** 导出按钮操作 */
function handleExport() {
  proxy.download('feedback/feedback/export', {
    ...queryParams.value
  }, `feedback_${new Date().getTime()}.xlsx`)
}

getList()
</script>

<style scoped>
.feedback-images {
  display: flex;
  flex-wrap: wrap;
}

.feedback-images .el-image {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.feedback-images .el-image:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
